<template>
  <div class="raiderstop">
    <div class="left">
      <p>周免英雄(4月4日-4月10日)</p>
      <div @mousemove="cur = 1">
        <img
          v-show="cur == 1"
          src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/105/105-freehover.png"
          alt=""
        />
        <img
          v-show="cur != 1"
          src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/105/105.jpg"
          alt=""
        />
      </div>
      <div @mouseover="cur = 2">
        <img
          v-show="cur == 2"
          src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/117/117-freehover.png"
          alt=""
        />
        <img
          v-show="cur != 2"
          src="	https://game.gtimg.cn/images/yxzj/img201606/heroimg/117/117.jpg"
          alt=""
        />
      </div>
      <div @mouseover="cur = 3">
        <img
          v-show="cur == 3"
          src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/152/152-freehover.png"
          alt=""
        />
        <img
          v-show="cur != 3"
          src="	https://game.gtimg.cn/images/yxzj/img201606/heroimg/152/152.jpg"
          alt=""
        />
      </div>
      <div @mouseover="cur = 4">
        <img
          v-show="cur == 4"
          src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/167/167-freehover.png"
          alt=""
        />
        <img
          v-show="cur != 4"
          src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/167/167.jpg"
          alt=""
        />
      </div>
      <div @mouseover="cur = 5">
        <img
          v-show="cur == 5"
          src="	https://game.gtimg.cn/images/yxzj/img201606/heroimg/174/174-freehover.png"
          alt=""
        />
        <img
          v-show="cur != 5"
          src="	https://game.gtimg.cn/images/yxzj/img201606/heroimg/174/174.jpg"
          alt=""
        />
      </div>
      <div @mouseover="cur = 6">
        <img
          v-show="cur == 6"
          src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/184/184-freehover.png"
          alt=""
        />
        <img
          v-show="cur != 6"
          src="	https://game.gtimg.cn/images/yxzj/img201606/heroimg/184/184.jpg"
          alt=""
        />
      </div>
      <div @mouseover="cur = 7">
        <img
          v-if="cur == 7"
          src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/542/542-freehover.png"
          alt=""
        />
        <img
          v-else
          src="	https://game.gtimg.cn/images/yxzj/img201606/heroimg/542/542.jpg"
          alt=""
        />
      </div>
      <div @click="go">更多英雄</div>
    </div>
    <div class="right">
      <span>
        <img
          src="	https://game.gtimg.cn/images/yxzj/web201605/main/avatar1.jpg"
          alt=""
        />
      </span>
      <span>亲爱的召唤师,&nbsp;&nbsp;欢迎</span>
      <span>登录</span>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    go() {
      if (this.$route.meta.a) return;

      this.$router.push("/ziliao/yingxiong");
    },
  },
  data() {
    return {
      cur: 1,
    };
  },
};
</script>

<style lang="scss" scoped>
.raiderstop {
  width: 1200px;
  margin: 0 auto;
  margin-top: 450px;
  display: flex;
  color: rgb(166, 175, 188);
  font-size: 14px;
  .left {
    border-top-left-radius: 4px;
    padding: 8px 20px 0 20px;
    width: 772px;
    height: 115px;
    background-color: rgba(20, 67, 106, 0.878);
    p {
      font-size: 14px;
      margin-bottom: 8px;
    }
    > div {
      margin-right: 10px;
      display: inline-block;
      height: 69px;
      //   overflow: hidden;
      img {
        height: 100%;
        border-radius: 6px;
        cursor: pointer;
        // transition: 1s;
      }
      &:last-child {
        width: 14px;
        cursor: pointer;
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
  .right {
    display: flex;
    align-items: center;
    border-top-right-radius: 4px;
    width: 428px;
    height: 115px;
    background-color: rgba(17, 72, 112, 0.866);
    > span:first-child {
      margin: 0 15px;
      img {
        margin-top: 23px;
        margin-left: 15px;
      }
      width: 106px;
      height: 120px;
      background-image: url("/public/img/spr.png");
      background-position: -110px -174px;
      margin-top: -8px;
    }
    > span:last-child {
      color: rgba(128, 128, 128, 0.696);
      margin-left: 18px;
      cursor: pointer;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}
</style>